import styled from '@emotion/styled';
import { Button, Col, Row, Collapse, Form, Input, Select, Spin, message } from 'antd';
import { DoubleLeftOutlined } from '@ant-design/icons';
const { Panel } = Collapse;
import React, { useEffect, useRef, useState } from 'react';
import AgentServer from '../../../public/widget';
import { getUserDevices, modifyWorkOrder, sendMoblieMessage } from '@/api';
import useSyncState from '@/hooks/useSyncState';
import { filterTips } from '@/utils';
import { useNavigate } from 'react-router-dom';
import { notification } from 'antd';
import ReconnectMessageBox from '../Reconnect';
import { useTranslation } from 'react-i18next';

const Header = styled.div`
	height: 50px;
	background-color: #001529;
	line-height: 50px;
`;

const ServiceFormWrapper = styled.div`
	width: 100%;
`;

const FormPanel = styled(Panel)`
	// height: 34px;
	background: linear-gradient(180deg, #f7faff 0%, #e8eef6 47%, #f7faff 100%);

	.ant-collapse-header {
		padding: 8px 12px !important;
	}
	.ant-form-item-required::before {
		display: none !important;
	}
`;

const ArrowLeft = styled(DoubleLeftOutlined)`
	top: 20% !important;
	rotate: -180deg;
	color: #a9b2c0;
`;

const SumbitBtn = styled(Button)`
	background-color: #5f699a;
`;

const NoWriteInput = styled(Input)`
	border: 0;
	pointer-events: none;
	background: none;
`;

const FormCollapse = styled(Collapse)`
	padding: 10px;
	max-height: calc(768px - 50px);
	overflow-y: auto;
	.ant-collapse-item-active {
		.ant-collapse-arrow {
			top: 40% !important;
			rotate: -90deg;
			color: #a9b2c0;
		}
	}
	.ant-form-item-label {
		pointer-events: none;
	}

	.ant-collapse-content-box {
		background-color: #fafbfc;
	}
	.ant-collapse-item {
		border: 0;
	}
	.ant-form-item-row {
		label: {
			font-size: 12px;
		}
	}
	.ant-form-item {
		margin-bottom: 6px;
		label {
			font-size: 12px;
		}
	}
`;

const FromSpin = styled(Spin)`
	max-height: 100% !important;
`;

const defaultUserInfo = {
	id: undefined,
	sn: undefined,
	openId: undefined,
	phone: undefined,
	ZKH_NAME: undefined, // 客户名
	ZYYJB_TEXT: undefined, // 医院级别
	ZLXR_NAME: undefined, // 联系人姓名
	ZLXR_TEL: undefined, // 联系人电话
	SALES_OFFICE_DESC: undefined // 所属分公司
};

const defaultDeviceInfo = {
	PRODUCT_ID: undefined, // 设备ID
	PRODUCT_LINE: undefined, // 产品线
	SETUP_DATE: undefined, // 安装日期
	ZGYDH_CODE: undefined, // 工艺代号
	PROD_MODEL: undefined, // 机型
	ZBX_STATUS: undefined, // 保修状态
	ZBX_TYPE: undefined // 保修类型
};

const defaultWorkOrder = {
	OBJECT_ID: undefined, // 服务单号
	ZTS_NAME: undefined, // 负责TS
	ZACT_CODE: undefined, // 工单状态
	ZWXZC_CODE: undefined, // 无需技术支持原因
	ZQTYY: undefined, // 其他原因
	ZPGYY_CODE: undefined, // 派工原因
	ZFWZL_CODE: undefined, // 服务类别
	ZDESCRIPTION: undefined, // 工单备注
	ZCLXX: undefined, // 处理信息
	WRITE_ZCLXX: undefined,
	ZZCFS_CODE: undefined // 支持方式
};

const defaultIgnoreSelectOrder = ['E0005', 'E0006', 'E0014', 'E0016'];

interface IUserInfo {
	id: number | undefined;
	sn: string | undefined;
	openId: string | undefined;
	phone: string | undefined;
	ZKH_NAME: string | undefined; // 客户名
	ZYYJB_TEXT: string | undefined; // 医院级别
	ZLXR_NAME: string | undefined; // 联系人姓名
	ZLXR_TEL: string | undefined; // 联系人电话
	SALES_OFFICE_DESC: string | undefined; // 所属分公司
}

interface IDeviceInfo {
	PRODUCT_ID: string | undefined; // 设备ID
	PRODUCT_LINE: string | undefined; // 产品线
	SETUP_DATE: string | undefined; // 安装日期
	ZGYDH_CODE: string | undefined; // 工艺代号
	PROD_MODEL: string | undefined; // 机型
	ZBX_STATUS: string | undefined; // 保修状态
	ZBX_TYPE: string | undefined; // 报修类型
}

interface IWorkOrder {
	OBJECT_ID: string | undefined; // 服务单号
	ZTS_NAME: string | undefined; // 负责TS
	ZACT_CODE: string | undefined; // 工单状态
	ZZCFS_CODE: string | undefined; // 支持方式
	ZWXZC_CODE: string | undefined; // 无需技术支持原因
	ZQTYY: string | undefined; // 其他原因
	ZPGYY_CODE: string | undefined; // 派工原因
	ZFWZL_CODE: string | undefined; // 服务类别
	ZDESCRIPTION: string | undefined; // 工单备注
	ZCLXX: string | undefined; // 处理信息
	WRITE_ZCLXX: string | undefined; // 新写入的工单信息
}

const ServiceForm = (props: any) => {
	const { t } = useTranslation();
	const defaultStatuOptions = [
		{
			id: 7,
			key: 'E0001',
			value: t('create')
		},
		{
			id: 8,
			key: 'E0002',
			value: t('seating-solution')
		},
		{
			id: 1,
			key: 'E0003',
			value: t('transfer-technical-support')
		},
		{
			id: 2,
			key: 'E0004',
			value: t('technical-support-solution')
		},
		{
			id: 3,
			key: 'E0005',
			value: t('field-service-assignment')
		},
		{
			id: 9,
			key: 'E0006',
			value: t('dispatch-completed')
		},
		{
			id: 4,
			key: 'E0008',
			value: t('submit')
		},
		{
			id: 5,
			key: 'E0009',
			value: t('technical-support-process')
		},
		{
			id: 6,
			key: 'E0013',
			value: t('not-support')
		},

		{
			id: 10,
			key: 'E0014',
			value: t('transfer-FSM-support')
		},
		{
			id: 11,
			key: 'E0016',
			value: t('transfer-FSM-dispatch')
		}
	];

	const defaultSupportOptions = [
		{
			id: 1,
			key: '001',
			value: t('device-disabled')
		},
		{
			id: 2,
			key: '002',
			value: t('device-verification')
		},
		{
			id: 3,
			key: '003',
			value: t('device-not-enabled')
		},
		{
			id: 4,
			key: '004',
			value: t('engineer-repair')
		},
		{
			id: 5,
			key: '005',
			value: t('commercial-issues')
		},
		{
			id: 6,
			key: '006',
			value: t('quality-control')
		},
		{
			id: 7,
			key: '007',
			value: t('client-solve')
		},
		{
			id: 8,
			key: '098',
			value: t('no-write')
		},
		{
			id: 9,
			key: '099',
			value: t('other')
		}
	];

	const defaultAssignerOptions = [
		{
			id: 1,
			key: '01',
			value: t('hard-crash')
		},
		{
			id: 2,
			key: '02',
			value: t('voc')
		},
		{
			id: 3,
			key: '03',
			value: t('service-marketing')
		},
		{
			id: 4,
			key: '04',
			value: t('inadequate-training')
		},
		{
			id: 5,
			key: '05',
			value: t('not-answer')
		},
		{
			id: 6,
			key: '06',
			value: t('batch-dispatching')
		},
		{
			id: 7,
			key: '07',
			value: t('no-write')
		}
	];

	const servicesMode = [
		{
			id: 1,
			key: '001',
			value: t('maintain')
		},
		{
			id: 2,
			key: '007',
			value: t('clinical-services')
		}
		// {
		// 	id: 3,
		// 	key: '048',
		// 	value: t('consult')
		// }
		// {
		//     id: 4,
		//     key: '030',
		//     value: ' 临床问题处理'
		// },
	];

	const supportMode = [
		// {
		//     id: 1,
		//     key: '01',
		//     value: '电话支持'
		// },
		// {
		//     id: 2,
		//     key: '02',
		//     value: '远程软件支持'
		// },
		{
			id: 3,
			key: '03',
			value: t('we-chat-support')
		}
	];

	useEffect(() => {
		AgentServer.Agent.addEventListener((info: { event: string; data: any }) => {
			if (info.event === 'ANSWER') {
				if (info.data.code === 10005) {
					setInSession(true);
				} else {
					message.warn(t('answer-call-error'));
				}
			}
			if (info.event === 'LOGIN') {
				console.log(info);
			}
			if (info.event === 'AMS') {
				if (['disconnect', 'reconnect_failed'].indexOf(info.data.data) !== -1) {
					setAmsStatus(info.data.data);
					setNetWorkError(true);
				}

				if (['connected', 'online'].indexOf(info.data.data) !== -1) {
					setAmsStatus('');
					setNetWorkError(false);
				}
			}
			if (info.event === 'CCS_ERROR') {
				console.log(info);
			}

			if (info.event === 'ON_RING') {
				setOrder({ customerInfo: null, workOrder: null });
				setUserInfo(defaultUserInfo);
				setDeviceInfo(defaultDeviceInfo);
				setWorkOrder(defaultWorkOrder);
				userInfoForm.setFieldsValue({ ...userInfo() });
				deviceInfoForm.setFieldsValue({ ...deviceInfo() });
				workOrderInfoForm.setFieldsValue({ ...workOrderInfo() });
				const { sessionId = '' } = info.data.data;
				if (sessionId) {
					setFormLoading(true);
					const { sessionId } = info.data.data;
					setSessionID(sessionId);
					loopFetch(sessionId);
					console.log(sessionId, AgentServer.Agent);
				}
			}
			if (info.event === 'CANCEL_RING') {
				console.log(info);

				const { reason = '' } = info.data.data;

				if (userInfo().phone && reason === 'ringingTimeout') {
					sendMsg();
				}
				setFormLoading(false);
			}
			if (info.event === 'HANG_UP') {
				// setSessionID('');
				setInSession(false);
				setFormLoading(false);
				if (loopTimer.current) {
					window.clearInterval(loopTimer.current);
					loopTimer.current = null;
				}

				setSupportReasonDisable(true);
				setOtherReasonDisable(true);
			}
		});
		return () => {
			AgentServer.Agent.removeEventListener();
			if (loopTimer.current) {
				window.clearInterval(loopTimer.current);
				loopTimer.current = null;
			}
		};
	}, []);

	useEffect(() => {
		if (AgentServer.Agent.user && AgentServer.Agent.user.userName) {
			console.log(AgentServer.Agent.user, 'userName');
			setAgent(AgentServer.Agent.user);
		}
		if (AgentServer.Agent.user && AgentServer.Agent.user.schedulingAttributes && AgentServer.Agent.user.schedulingAttributes.phone) {
			console.log(AgentServer.Agent.user, 'phone');
			setAgentMobile(AgentServer.Agent.user.schedulingAttributes.phone);
		}
	}, [AgentServer.Agent.user]);
	const nav = useNavigate();
	const [supportReasonDisable, setSupportReasonDisable] = useState<boolean>(true);
	const [otherReasonDisable, setOtherReasonDisable] = useState<boolean>(true);
	const [activekeys, setActiveKeys] = useSyncState<string[]>(['0', '1', '2', '3']);
	const loopTimer = useRef<any>(null);
	const [order, setOrder] = useSyncState<{ customerInfo: any; workOrder: any }>({ customerInfo: null, workOrder: null });

	const [userInfo, setUserInfo] = useSyncState<IUserInfo>(defaultUserInfo);
	const [agentMobile, setAgentMobile] = useSyncState<string | undefined>('');
	const [deviceInfo, setDeviceInfo] = useSyncState<IDeviceInfo>(defaultDeviceInfo);
	const [workOrderInfo, setWorkOrder] = useSyncState<IWorkOrder>(defaultWorkOrder);
	const [agent, setAgent] = useSyncState<{ id: number; userName: string } | undefined>(undefined);
	const [tips, setTips] = useState<string>('');
	const [loopTotal, setLoopTotal] = useSyncState<number>(20 * 1000);
	const [ignoreOrderSelecte, setIgnoreOrderSelecte] = useState<string[]>(defaultIgnoreSelectOrder);
	const [zactCode, setZactCode] = useState<string>('');

	//  是否在会话中
	const [inSession, setInSession] = useSyncState<boolean>(false);

	useEffect(() => {
		if (ignoreOrderSelecte.includes(zactCode)) {
			setStatuOptions(defaultStatuOptions);
		} else {
			setStatuOptions(defaultStatuOptions.filter(item => item.id < 7));
		}
	}, [zactCode]);

	useEffect(() => {
		const { customerInfo = null, workOrder = null } = order();

		if (workOrder) {
			const {
				PRODUCT_ID = undefined, // 设备ID
				PRODUCT_LINE = undefined, // 产品线
				SETUP_DATE = undefined, // 安装日期
				ZGYDH_CODE = undefined, // 工艺代号
				PROD_MODEL = undefined, // 机型
				ZBX_STATUS = undefined, // 保修状态
				ZBX_TYPE = undefined, // 保修类型
				OBJECT_ID = undefined, // 服务单号
				ZTS_NAME = undefined, // 负责TS
				ZACT_CODE = undefined, // 工单状态
				ZWXZC_CODE = undefined, // 无需技术支持原因
				ZQTYY = undefined, // 其他原因
				ZPGYY_CODE = undefined, // 派工原因
				ZFWZL_CODE = undefined, // 服务类别
				ZDESCRIPTION = undefined, // 工单备注
				ZCLXX = undefined, // 处理信息
				ZZCFS_CODE = undefined // 支持方式
			} = workOrder;

			setDeviceInfo({
				...deviceInfo(),
				PRODUCT_ID, // 设备ID
				PRODUCT_LINE, // 产品线
				SETUP_DATE, // 安装日期
				ZGYDH_CODE, // 工艺代号
				PROD_MODEL, // 机型
				ZBX_STATUS, // 保修状态
				ZBX_TYPE // 保修类型
			});

			setWorkOrder({
				...workOrderInfo(),
				OBJECT_ID, // 服务单号
				ZTS_NAME: ZTS_NAME ? ZTS_NAME : agent()?.userName, // 负责TS
				ZACT_CODE, // 工单状态
				ZWXZC_CODE: ZWXZC_CODE ? ZWXZC_CODE : undefined, // 无需技术支持原因
				ZQTYY, // 其他原因
				ZPGYY_CODE: ZPGYY_CODE ? ZPGYY_CODE : undefined, // 派工原因
				ZFWZL_CODE, // 服务类别
				ZDESCRIPTION, // 工单备注
				WRITE_ZCLXX: undefined,
				ZCLXX: filterTips(ZCLXX), // 处理信息
				ZZCFS_CODE: ZZCFS_CODE ? ZZCFS_CODE : '03' // 支持方式
			});
			setZactCode(ZACT_CODE);
		}
		if (customerInfo) {
			const { id = undefined, sn = undefined, openId = undefined, phone = undefined } = customerInfo;
			const {
				ZKH_NAME = undefined,
				ZYYJB_TEXT = undefined,
				ZLXR_NAME = undefined,
				ZLXR_TEL = undefined,
				SALES_OFFICE_DESC = undefined,
				ZTS_NAME = undefined,
				ZZCFS_CODE = '03',
				ZACT_CODE
			} = workOrder;
			setUserInfo({ ...userInfo(), id, sn, openId, phone, ZKH_NAME, ZYYJB_TEXT, ZLXR_NAME, ZLXR_TEL, SALES_OFFICE_DESC });
			console.log(id, sn, openId, phone, ZKH_NAME, ZYYJB_TEXT, ZLXR_NAME, ZLXR_TEL, SALES_OFFICE_DESC, userInfo());
			userInfoForm.setFieldsValue({ ...userInfo() });
			if (ZKH_NAME === '外部虚拟客户' && ZACT_CODE === 'E0003') {
				setWorkOrder({ ...workOrderInfo(), ZACT_CODE: 'E0008' });
			}
			if (ZKH_NAME === '外部虚拟客户') {
				setTips(t('remark-tips') || '');
			} else {
				setTips('');
			}
			if (!ZTS_NAME) {
				setWorkOrder({ ...workOrderInfo(), ZTS_NAME: agent()?.userName });
			}
		}
		deviceInfoForm.setFieldsValue({ ...deviceInfo() });
		workOrderInfoForm.setFieldsValue({ ...workOrderInfo() });
	}, [order()]);

	const statusChange = (val: string, mode: 'status' | 'reason' | 'support') => {
		console.log(val, mode);
		if (mode === 'status') {
			setSupportReasonDisable(val !== 'E0013');
		}
		if (mode === 'reason') {
			setOtherReasonDisable(val !== '099');
		}
	};

	const sendMsg = async () => {
		if (agentMobile()) {
			console.log('send msg:', agentMobile());
			let content = `视频呼入取消：单号:${workOrderInfo().OBJECT_ID + '，'}姓名：${userInfo().ZLXR_NAME}，手机号码：${userInfo().phone}, 机型：${
				deviceInfo().PROD_MODEL
			}，问题描述：，请及时回拨电话处理，谢谢。`;
			await sendMoblieMessage({ phone: agentMobile()!, content: content });
		}
	};

	const loopFetch = (sessionId: string) => {
		fetchUserDevices(sessionId);
		loopTimer.current = setInterval(() => {
			if (loopTotal() === 0 && loopTimer.current) {
				window.clearInterval(loopTimer.current);
				loopTimer.current = null;
				setFormLoading(false);
				setLoopTotal(20 * 1000);
				message.warning(t('check-order-failed') + '!');
			} else {
				fetchUserDevices(sessionId);
				setLoopTotal(loopTotal() - 5 * 1000);
			}
		}, 5000);
	};

	const fetchUserDevices = async (sessionId: string) => {
		try {
			const { data } = await getUserDevices(sessionId);
			if (data.code === '0000' && data.data.customerInfo && data.data.workOrder) {
				setOrder(data.data);
				console.log(data);
				window.clearInterval(loopTimer.current);
				loopTimer.current = null;
				setFormLoading(false);
				setLoopTotal(20 * 1000);
			}
		} catch (error) {
			// message.warning("工单查询失败！")
			console.log(error);
		}
	};

	const modifyOrder = async (info: {
		ZSLD_CODE?: string; // 工单状态
		ZZCFS_CODE?: string; // 支持方式
		ZWXZC_CODE?: string; // 无需技术支持原因
		ZQTYY?: string; // 其他原因
		ZPGYY_CODE?: string; // 派工原因
		ZTS_CODE: string; // 工号
		ZCLXX_TEXT?: string; // 处理信息
		ZLXR_NAME?: string; // 联系人姓名
		ZLXR_TEL?: string; // 联系人电话
		ZLCPXLB_TEXT?: string; // 临床服务类别
		ZFWZL_CODE?: string; // 临床服务类别Code
	}) => {
		try {
			const { data } = await modifyWorkOrder(info, sessionID);
			if (data.code === '0000') {
				console.log(data);
				message.info(t('modified-order-successfully' + '！'));
			}
		} catch (error: any) {
			message.info(`${t('modified-order-failed')}, ${error.message ? error.message : error.data?.message ? error.data?.message : JSON.stringify(error)}`);
			console.log(error);
		} finally {
			fetchUserDevices(sessionID);
		}
	};

	const [statuOptions, setStatuOptions] = useState<{ id: number; key: string; value: string }[]>(defaultStatuOptions);
	const [supportOptions, setSupportOptions] = useState<{ id: number; key: string; value: string }[]>(defaultSupportOptions);
	const [assignerOptions, setAssignerOptions] = useState<{ id: number; key: string; value: string }[]>(defaultAssignerOptions);
	const [serviceMode, setServiceMode] = useState<boolean>(false);
	const [sessionID, setSessionID] = useState<string>('');
	const [formLoading, setFormLoading] = useState<boolean>(false);

	const [userInfoForm] = Form.useForm();
	const [deviceInfoForm] = Form.useForm();
	const [workOrderInfoForm] = Form.useForm();

	const [amsStatus, setAmsStatus] = useSyncState<string>('');
	const [showNetWorkError, setNetWorkError] = useSyncState<boolean>(false);

	const onChange = (key: string | string[]) => {
		console.log(key);
		setActiveKeys(key as string[]);
	};

	const submitForm = async () => {
		if (!sessionID) {
			message.warning(t('no-calls'));
			return;
		}
		if (workOrderInfo().ZACT_CODE === 'E0005') {
			await workOrderInfoForm.validateFields(['ZPGYY_CODE']);
		} else {
			workOrderInfoForm.resetFields();
		}

		const data = {
			ZSLD_CODE: '', // 工单状态
			ZZCFS_CODE: '', // 支持方式
			ZWXZC_CODE: '', // 无需技术支持原因
			ZQTYY: '', // 其他原因
			ZPGYY_TEXT: '', // 派工原因
			ZTS_CODE: '', // 工号
			ZCLXX_TEXT: '', // 处理信息
			ZLXR_NAME: '', // 联系人姓名
			ZLXR_TEL: '', // 联系人电话
			ZLCPXLB_TEXT: '', // 临床服务类别
			ZFWZL_CODE: '' // 临床服务类别
		};

		try {
			const { ZACT_CODE, ZZCFS_CODE, ZWXZC_CODE, ZQTYY, ZPGYY_CODE, OBJECT_ID, WRITE_ZCLXX, ZFWZL_CODE, ZTS_NAME } = workOrderInfo();
			const { ZLXR_NAME, ZLXR_TEL } = userInfo();
			data.ZSLD_CODE = ZACT_CODE as any;
			data.ZZCFS_CODE = ZZCFS_CODE as any;
			data.ZWXZC_CODE = ZWXZC_CODE as any;
			data.ZQTYY = ZQTYY as any;
			data.ZPGYY_TEXT = ZPGYY_CODE as any;
			data.ZTS_CODE = agent()?.userName as any;
			data.ZCLXX_TEXT = WRITE_ZCLXX as any;
			data.ZLXR_TEL = ZLXR_TEL as any;
			data.ZLXR_NAME = ZLXR_NAME as any;
			data.ZLCPXLB_TEXT = ZFWZL_CODE as any;
			data.ZFWZL_CODE = ZFWZL_CODE as any;
			setFormLoading(true);
			modifyOrder(data);
		} catch (error) {
			console.log(error);
		}
	};

	const formChange = (value: string, allValue: any, mode: 'device' | 'user' | 'work') => {
		if (mode === 'user') {
			setUserInfo({ ...userInfo(), ...allValue });
		}
		if (mode === 'device') {
			setDeviceInfo({ ...deviceInfo(), ...allValue });
		}
		if (mode === 'work') {
			setWorkOrder({ ...workOrderInfo(), ...allValue });
		}

		console.log(workOrderInfo(), allValue);
	};

	const relogin = () => {
		notification.destroy();
		nav('/osslogin', { replace: true });
		window.location.reload();
	};

	return (
		<FromSpin spinning={formLoading} delay={100} tip={'加载中'} size={'large'}>
			<ServiceFormWrapper>
				<Header>
					<Row>
						<Col span={12} style={{ paddingLeft: '12px', color: '#fff' }}>
							{t('order')}
						</Col>
						<Col span={12} style={{ padding: '0 14px', textAlign: 'right' }}>
							{' '}
							<SumbitBtn type="primary" shape="round" onClick={submitForm} htmlType="submit">
								{t('save')}
							</SumbitBtn>
						</Col>
					</Row>
					<FormCollapse defaultActiveKey={activekeys()} activeKey={activekeys()} onChange={onChange} expandIconPosition={'end'} expandIcon={() => <ArrowLeft />} bordered={false}>
						<FormPanel header={t('contact-information')} key="1">
							<Form
								form={userInfoForm}
								onValuesChange={(value: string, allValue: any) => formChange(value, allValue, 'user')}
								initialValues={userInfo()}
								labelCol={{ span: 6 }}
								wrapperCol={{ span: 18 }}
								layout="horizontal"
								labelAlign="left"
								size={'small'}
							>
								<Form.Item label={t('client') + '：'} name={'ZKH_NAME'}>
									<NoWriteInput value={''} readOnly={true} />
								</Form.Item>
								<Form.Item label={t('hospital-level') + '：'} name={'ZYYJB_TEXT'}>
									<NoWriteInput value={''} readOnly={true} />
								</Form.Item>
								<Form.Item label={t('contact') + '：'} name={'ZLXR_NAME'}>
									<Input value={''} />
								</Form.Item>
								<Form.Item label={t('mobile') + '：'} name={'ZLXR_TEL'}>
									<NoWriteInput value={''} readOnly={true} />
								</Form.Item>
								<Form.Item label={t('filiale') + '：'} name={'SALES_OFFICE_DESC'}>
									<NoWriteInput value={''} readOnly={true} />
								</Form.Item>
							</Form>
						</FormPanel>
						<FormPanel header={t('device-information')} key="2">
							<Form
								form={deviceInfoForm}
								initialValues={deviceInfo()}
								labelCol={{ span: 8 }}
								wrapperCol={{ span: 16 }}
								layout="horizontal"
								labelAlign="left"
								size={'small'}
								onValuesChange={(value: string, allValue: any) => formChange(value, allValue, 'device')}
							>
								<Row>
									<Col span={14}>
										<Form.Item label={t('device-no') + '：'} name={'PRODUCT_ID'}>
											<NoWriteInput value={''} readOnly={true} />
										</Form.Item>
									</Col>
									<Col span={10}>
										<Form.Item label={t('product-line') + '：'} name={'PRODUCT_LINE'} labelCol={{ span: 10 }} wrapperCol={{ span: 14 }}>
											<NoWriteInput value={''} readOnly={true} />
										</Form.Item>
									</Col>
								</Row>
								<Row>
									<Col span={14}>
										<Form.Item label={t('set-up-time') + '：'} name={'SETUP_DATE'}>
											<NoWriteInput value={''} readOnly={true} />
										</Form.Item>
									</Col>
									<Col span={10}>
										<Form.Item label={t('process-code')} name={'ZGYDH_CODE'} labelCol={{ span: 12 }} wrapperCol={{ span: 12 }}>
											<NoWriteInput value={''} readOnly={true} />
										</Form.Item>
									</Col>
								</Row>

								<Row>
									<Col span={14}>
										<Form.Item label={t('device-model')} name={'PROD_MODEL'}>
											<NoWriteInput value={''} readOnly={true} />
										</Form.Item>
									</Col>
									<Col span={10}>
										<Form.Item label={t('guaranteed-status')} name={'ZBX_STATUS'} labelCol={{ span: 14 }} wrapperCol={{ span: 10 }}>
											<NoWriteInput value={''} readOnly={true} />
										</Form.Item>
									</Col>
								</Row>
								<Row>
									<Col span={24}>
										<Form.Item label={t('guaranteed-model')} name={'ZBX_TYPE'} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
											<NoWriteInput value={''} readOnly={true} />
										</Form.Item>
									</Col>
								</Row>
							</Form>
						</FormPanel>
						<FormPanel header={t('order-handling-information')} key="3">
							<Form
								form={workOrderInfoForm}
								onValuesChange={(value: string, allValue: any) => formChange(value, allValue, 'work')}
								initialValues={workOrderInfo()}
								labelCol={{ span: 8 }}
								wrapperCol={{ span: 16 }}
								layout="horizontal"
								labelAlign="left"
								labelWrap={true}
								size={'small'}
							>
								<Form.Item label={t('service-no') + '：'} name={'OBJECT_ID'}>
									<NoWriteInput value={''} readOnly={true} />
								</Form.Item>
								<Form.Item label={t('responsible-TS') + '：'} name={'ZTS_NAME'}>
									<NoWriteInput value={''} readOnly={true} />
								</Form.Item>
								<Form.Item label={t('status') + '：'} name={'ZACT_CODE'}>
									<Select placeholder={t('select')} onSelect={e => statusChange(e, 'status')} disabled={ignoreOrderSelecte.includes(zactCode)}>
										{statuOptions.map(item => (
											<Select.Option key={item.key}>{item.key + ' ' + item.value}</Select.Option>
										))}
									</Select>
								</Form.Item>
								<Form.Item label={t('support-model') + '：'} name={'ZZCFS_CODE'}>
									<Select placeholder={t('select')} onSelect={e => statusChange(e, 'support')}>
										{supportMode.map(item => (
											<Select.Option key={item.key}>{item.key + ' ' + item.value}</Select.Option>
										))}
									</Select>
								</Form.Item>
								<Form.Item label={t('not-support-reason') + '：'} name={'ZWXZC_CODE'}>
									<Select placeholder={t('select')} onSelect={e => statusChange(e, 'reason')} disabled={supportReasonDisable}>
										{supportOptions.map(item => (
											<Select.Option key={item.key}>{item.key + ' ' + item.value}</Select.Option>
										))}
									</Select>
								</Form.Item>
								<Form.Item label={t('other-reason') + '：'} name={'ZQTYY'}>
									<Input placeholder={t('enter-reason') + '...'} value={''} disabled={otherReasonDisable} />
								</Form.Item>
								<Form.Item label={t('operation-reason') + '：'} name={'ZPGYY_CODE'} rules={[{ required: true, message: '请选择派工原因!' }]}>
									<Select placeholder={t('select')}>
										{assignerOptions.map(item => (
											<Select.Option key={item.key}>{item.key + ' ' + item.value}</Select.Option>
										))}
									</Select>
								</Form.Item>
								<Form.Item label={t('service-model') + '：'} name={'ZFWZL_CODE'}>
									{/* <Input value={serviceMode ? '维修' : '临床服务'} /> */}

									<Select placeholder={t('select')}>
										{servicesMode.map(item => (
											<Select.Option key={item.key}>{item.key + ' ' + item.value}</Select.Option>
										))}
									</Select>
								</Form.Item>
								<Form.Item label={t('remark') + '：'} name={'WRITE_ZCLXX'} labelCol={{ span: 24 }} wrapperCol={{ span: 24 }} colon={true}>
									<Input.TextArea rows={6} value={''} autoSize={false} placeholder={tips} defaultValue={undefined} style={{ color: '#222' }} />
								</Form.Item>
								<Form.Item label="" name={'ZCLXX'} wrapperCol={{ span: 24 }}>
									<Input.TextArea
										disabled
										value={''}
										autoSize={{ minRows: 6, maxRows: 8 }}
										style={{ background: '#FAFBFC', color: '#222', wordBreak: 'break-all' }}
										readOnly={true}
									/>
								</Form.Item>
							</Form>
						</FormPanel>
					</FormCollapse>
				</Header>
			</ServiceFormWrapper>
			{showNetWorkError() && !inSession() ? <ReconnectMessageBox onHangup={relogin} type={'ams'} /> : null}
		</FromSpin>
	);
};

export default ServiceForm;
